<template>
  <view class="urgrade_mask">
    <view class="urgrade_modal">
      <view class="urgrade_modal_header">
        <image
          src="/static/urgrade_bg.png"
          mode="scaleToFill"
        />
      </view>
      <view class="urgrade_modal_body">
        <view style="font-weight: bold;font-size: 16px;">本次升级</view>
        <scroll-view scroll-y style="height: 140px;padding: 5px 0;box-sizing: border-box;">
          <view v-for="i in 10" :key="i">
            {{ i }}、优化用户体验
          </view>
        </scroll-view>
      </view>
      <view class="urgrade_modal_footer">
        立即升级
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: transparent;
  }
  .urgrade_mask {
    position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
    background-color: rgba($color: #000000, $alpha: .5);

    .urgrade_modal {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      width: calc(100% - 104px);
      margin: auto;
      transform: translateY(-50%) translateY(-40px);
      background: linear-gradient(to bottom, transparent 100px, #ffffff 100px);
      border-radius: 14px;

      &_header {
        width: 100%;
        height: 193px;
        background-size: 100% 100%;

        image {
          width: 100%;
          height: 100%;
        }
      }

      &_body {
        width: 100%;
        height: 160px;
        padding: 0 15px;
        box-sizing: border-box;
      }

      &_footer {
        display: flex;
        justify-content: center;
        padding: 8px 10px;
        width: 70%;
        margin: 10px auto 15px;
        border-radius: 25px;
        background-color: #8445ce;
        color: #ffffff;
      }
    }
  }
</style>